<template>
  <view>
      <uni-nav-bar title="去对比" height="175rpx" :border="false" @clickLeft="clickLeft" @clickRight="clickRight">
       <template v-slot:left>
         <view>
           <uni-icons type="back" color="#666" size="18" />
         </view>
       </template>
       <template v-slot:right>
         <view class="box">
           <view class="one">
             <image src="../../static/prebook/shuye.png" mode=""></image>
           </view>
           <view class="two">
             <image src="../../static/prebook/banyuan.png" mode=""></image>
           </view>
         </view>
       </template>
     </uni-nav-bar>
     <view class="navbarborder"></view>
     <view class="content">
       <view class="view">
         <view class="img">
           <image src="../../static/prebook/temp1.png" mode=""></image>
         </view>
       </view>
       <view class="view">
         <view class="img">
           <image src="../../static/prebook/temp1.png" mode=""></image>
         </view>
       </view>
       <view class="view">
         <view class="img">
           <image src="../../static/prebook/temp1.png" mode=""></image>
         </view>
       </view>
     </view>
     <view class="bottom">
       <view class="line"></view>
       <view class="text">我是有底线的</view>
       <view class="line"></view>
     </view>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  const clickLeft = () => {
    console.log('clickLeft',)
  }
  const clickRight = () => {
    console.log('clickRight',)
  }
  const tabIndex = ref(1)
  const changeTab = (e) => {
    console.log('选择tabIndex', e)
    tabIndex.value = e
    console.log('tabIndex.value', tabIndex.value)
  }
</script>

<style lang="scss" scoped>
  
  .box{
    width: 160rpx;
    height: 60rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 2rpx solid grey;
    border-radius: 40rpx;
    padding: 8rpx;
    .one{
      width: 40rpx;
      height: 40rpx;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: rgb(3,83,250);
      padding: 10rpx;
      image{
        width: 100%;
        height: 100%;
      }
    }
    .two{
      width: 40rpx;
      height: 40rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #fff;
      image{
        width: 100%;
        height: 100%;
      }
    }
  }
  .navbarborder{
    height: 0;
    border-top: 2rpx solid #EEEEEE;
  }
  .content{
    padding: 1rpx;
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    .view{
      width: 374rpx;
      height: 500rpx;
      .img{
        width: 374rpx;
        height: 500rpx;
        image{
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .bottom{
    width: 100%;
    height: 50rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 20rpx;
    .line{
      height: 0;
      width: 200rpx;
      border: 1rpx solid rgb(85,182,172);
    }
    .text{
      color: rgb(85,182,172);
      font-size: 32rpx;
    }
  }
</style>